Els selectors de germa(ns) en CSS són selectors compostos que ens permeten seleccionar un element germà dins de l'HTML. Un element germà es situa al mateix nivell dins l'estructura de l'html. Per tant, si l'element està dins d'un altre element, és fill, i si estan al mateix nivell, són germans.
<h1>TITOL</h1>
<h2>TITOL 2.1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, nemo cum. Doloribus soluta
quasi iusto laborum eveniet aut dolore aperiam nobis in voluptate. Repellendus consequuntur expedita
explicabo dolor cumque minus!
</p>
<div>
</div>
<h2>TITOL 2.2</h2>
Per seleccionar només el germà següent, és a dir l'etiqueta germana següent o la classe germana següent d'una etiqueta germana anterior o d'una classe germana anterior, farem servir el signe + entre la germana anterior i la germana següent. Aquest selector només afectarà els elements que sigui germà i que aparegui després de l'element de referència, no afectarà a l'anterior. Ho entendrem millor amb un exemple:
Si volguessim seleccionar NOMÉS el segon h2 del nostre exemple, podriem recolzar-nos en el div i seleccionar el seu germà següent h2.
div + h2 {
background-color: teal;
}
Podem barrejar tant etiquetes com classe quan seleccionem germans següents.
.text-2 + .title-2 {
background-color: teal;
}
En el fitxer 1.12 - Exercici.html, intenteu posar un background de color teal a l'h2 de la linia 34 del fitxer i un color coral a l'h2 de la linia 26.
Per seleccionar tots els germans següents, fem servir el símbol ~ que es diu titlla en català, virgulilla en castellà o diacritic mark en anglès. La titlla és una ratlleta que es posa sobre una lletra com a signe diacrític o d'abreviació. La titlla es posa prement ALT GR + 4. Com que és un signe que és comporta com un accent perquè aparegui hem de prémer espai o una lletra. Aquest selector només afectarà els elements que siguin germans i que apareguin després de l'element de referència, no els anteriors.
Si volguessim seleccionar els dos p després del primer p amb classe text-1, fariem servir la virgulilla.
<p class="text-1">Paràgraf 1</p>
<p class="text-2">Paràgraf 2</p>
<p class="text-3">Paràgraf 3</p>
.text-1 ~ p {
background-color: teal;
}
Si canviem el nom de les classes dels dos últims p i hi posem la mateixa classe, també funcionaria si utilitzem la titlla.
<p class="text-1">Paràgraf 1</p>
<p class="text">Paràgraf 2</p>
<p class="text">Paràgraf 3</p>
.text-1 ~ .text {
background-color: teal;
}
No és recomanable baixar molts nivells però podem utilitzar aquestes configuracions:
.text-1 ~ .text span {
background-color: teal;
}
.text-1 ~ .text + span {
background-color: teal;
}
En la documentació de w3schools teniu més informació sobre els selectors i els seus patrons.